<template>
    <div class="container" @click="handleGalleryClick">
      <div class="wrapper">



            <swiper :options="swiperOptions">
              <swiper-slide v-for="(item,index) in imgs" :key="index">
                <img class="wrapper-img" :src="item" />
              </swiper-slide>

              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>





      </div>
    </div>
</template>

<script>
    export default {
        name: "Gallery",
        props:{
          imgs:{
            type:Array,
            default(){
              return []
            }
          }
        },
        data(){
          return {
            swiperOptions: {
              pagination: {el:'.swiper-pagination',type:'fraction'},//分页设置
              loop:true,
              autoplay: {
                delay: 1500,
                stopOnLastSlide: false,//是否停在最后一页
                disableOnInteraction: false//用户操作后是否禁止自动播放
              },
              observeParents: true,//设置dom变动后（消失/显示切换）自动更新数据，不卡顿
              observer: true//设置dom变动后（消失/显示切换）自动更新数据，不卡顿
              //监听swiper插件父级元素发生变化后，自动自我刷新。解决宽度计算问题
              //observeParents: true,
              //observer: true
            }
          }
        },
      methods:{
          handleGalleryClick(){
            this.$emit("close")
          }
      }
    }
</script>

<style lang="stylus" scoped>
 @import '~styles/varibles'
  .container >>> .swiper-container
    overflow: inherit//.swiper-pagination的overflow继承自.swiper-container,而.swiper-container继承自.wraper
  .container
    position:fixed
    left:0
    top:0
    right:0
    bottom:0
    background:$bgColor
    z-index:99
    display:flex
    flex-direction:column
    justify-content:center
    .wrapper
       //width:100%
       //overflow:hidden
       height: 0
       width: 100%
       padding-bottom: 100%
       flex-direction :row
       .wrapper-img
          width:100%
       .swiper-pagination
           background:#ffff00
           bottom:-1rem



</style>
